import { makeStyles } from "@material-ui/core";
import  Card  from "@material-ui/core/Card";
import  CardActionArea  from "@material-ui/core/CardActionArea";
import  CardActions from "@material-ui/core/CardActions";
import  CardContent from "@material-ui/core/CardContent";
import  CardMedia from "@material-ui/core/CardMedia";
import  Button from "@material-ui/core/Button";
import  Typography  from "@material-ui/core/Typography";

const useStyles = makeStyles({
    root:{
        maxWidth:345,
    },
    media:{
        height:140,
    },
});



export default function MediaCard( {image,title,description}){
    const classes=useStyles();

    return (
        <Card className={classes.root}>
            <CardActionArea>
                <CardMedia 
                className={classes.media}
                image={image}
                title={title}
                />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="h2" >
                        {title}
                    </Typography>
                    <Typography variant="body2" color="textSecondary" component="p">
                        {description}
                    </Typography>
                </CardContent>
            </CardActionArea>
            <CardActions>
                <Button size="small" color="primary">
                    share
                </Button>
                <Button size="small" color="primary">
                    hello
                </Button>
            </CardActions>
        </Card>
    );
}